<!--
 * @Author: your name
 * @Date: 2021-09-06 18:38:02
 * @LastEditTime: 2021-09-12 11:24:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\info\article.vue
-->
<template>
<div class="column">
        <div class="btn">
            <el-form :model="params" :rules="rules" ref="ruleForm">
               <el-form-item>
                    <el-select v-model="params.status" placeholder="状态" clearable>
                        <el-option label="未审核" value="未审核"></el-option>
                        <el-option label="审核通过" value="审核通过"></el-option>
                        <el-option label="推荐" value="推荐"></el-option>
                        <el-option label="审核不通过" value="审核不通过"></el-option>
                    </el-select>
                    <el-input v-model="params.title" placeholder="标题" style="width: 150px"></el-input>
                    <el-select  v-model="params.categoryId" placeholder="请选择栏目" clearable>
                        <el-option v-for="(item,index) in selectData" :label="item.name" :key="index" :value="item.id"></el-option>
                    </el-select>
                    <el-button type="primary" size="small" @click="pageQueryCategory">查询</el-button>
                    <el-button type="primary" size="small" @click="toUpLoadPage" class="send">发布风采</el-button>
               </el-form-item>
            </el-form>
            
        </div>
        <div class="content">
            <el-table :data="tableData.list" style="width: 100%">
                <el-table-column align="center" type="index" width="50" label="序号" ></el-table-column>
                <el-table-column align="center" prop="cover" label="封面">
                    <template v-slot = "scope">
                            <img :src="scope.row.cover" width="100" height="100px" alt="图标找不到了">
                    </template>
                </el-table-column>
                <el-table-column prop="category.name" label="风采"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template v-slot="scope">
                        <el-button type="warning" size="mini"  v-if="scope.row.status == '推荐'?true:false">{{scope.row.status}}</el-button>
                        <el-button type="danger" size="mini" v-else-if="scope.row.status == '审核不通过'?true:false">{{scope.row.status}}</el-button>
                        <el-button type="success" size="mini" v-else-if="scope.row.status == '审核通过'?true:false">{{scope.row.status}}</el-button>
                        <el-button type="info" size="mini" v-else>{{scope.row.status}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template v-slot="scope">
                        <el-button type="text" size="small" @click="toChangeHandler(scope.row.id,'推荐')">推荐</el-button>
                         <el-button type="text" size="small" @click="toEditHandler(scope.row.id,'审核通过')">审核</el-button>
                        <el-button type="text" size="small" style="color: red" @click="toRemoveHandler(scope.row.id)">删除</el-button>
                    </template>        
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next,sizes,jumper" 
                            :total="tableData.total"
                            :current-page="params.page"
                            :page-size="params.pageSize"
                            @current-change="currentPageHandler"
                            @size-change="pageSizeHandler"
                            :page-sizes="[5,10,15]">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request'
import {mapActions} from 'vuex'
import qs from 'qs'
import lodash from 'lodash'
export default {
    data() {
        return {
            tableData: {},
            params: {
                page: 1,
                pageSize: 5
            },
            dialogData: {},
            visible: false,
            formLabelWidth: '120px',
            title: '',
            imageUrl: {},
            rules: {
                name: [{required: true, message: '请输入栏目名称', trigger: 'blur'}]
            },
            selectData: [],
            message: []
        }
    },
    methods: {
        async pageQueryCategory() {
            let res = await request.get('/article/pageQuery',{params:this.params})
            this.tableData = res.data
        },
        async categoryFindAll() {
            let res = await request.get('/category/findAll')
            this.selectData = res.data
        },
        currentPageHandler(page) {
            this.params.page = page;
            this.pageQueryCategory();
        },
        pageSizeHandler(pageSize) {
             this.params.pageSize = pageSize;
             this.pageQueryCategory();
        },
        dialogSaveHandler() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    request.post('/productCategory/saveOrUpdate',qs.stringify(this.dialogData)).then( res =>{
                    this.pageQueryCategory(); 
                    this.$message.success(res.message)
                    this.visible = false;
                   })
                } else {
                    return false;
                }
            });
        },
        dialogCloseHandler() {
            this.$refs['ruleForm'].resetFields();
        },
        toChangeHandler(id,status) {
            this.$confirm('您确定要推荐此咨询吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {request.post('/article/changeStatus',qs.stringify({id,status})).then( res => {
                    this.pageQueryCategory();
                    this.$message.success(res.message)
             })
            });
        },
        toRemoveHandler(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/article/deleteById',{params:{id:id}}).then( res=> {
                this.pageQueryCategory();
                this.$message.error(res.message)
            });
            })
        },
        toUpLoadPage() {
            this.$router.push({
                path: 'publish'
            })
        },
        ...mapActions('categories',['findAllMessage']),
        toEditHandler(id,status) {
           this.$confirm('确定要审核该咨询吗, 是否继续展示?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {request.post('/article/changeStatus',qs.stringify({id,status})).then( res => {
                    this.pageQueryCategory();
                    this.$message.success(res.message)
             })
            });
        }
    },
    created() {
        this.pageQueryCategory()
        this.categoryFindAll()
    },
}
</script>

<style scoped>s
.el-select{
    margin-right: 20px;
}
.el-input{
    margin: 0 20px;
}
.send{
    float: right;
    margin-top: 3px;
}
.el-form-item .el-button{
    margin-left: 20px;
}
</style>